<template>
	<view class="content">
		<!-- <view class="search-block">
			<input class="search" @blur="inputChange" maxlength="30" placeholder="请输入关键字" />
			<view class="iconfont icon-sousuo"></view>
		</view> -->
		<view class="list-block">
			<block v-if="list.length>0">
				<view class="item-block" v-for="(item) in list" :key="item.id" @click="navigate('/page_other/train/detail?id='+item.id)">
					<view class="top-title">
						<view class="apply-title">{{item.trainName}}</view>
						<view class="btn">立即报名</view>
					</view>
					<view class="desc-block">
						<view class="desc">
							<image :src="imageUrl+'/train/department_icon.png'" mode="widthFix" class="desc-icon">
							</image>
							<view class="desc-text"><text class="label">机构：</text>{{item.company}}</view>
						</view>
						<view class="desc">
							<image :src="imageUrl+'/train/time_icon.png'" mode="widthFix" class="desc-icon"></image>
							<view class="desc-text"><text class="label">时间：</text>{{item.trainTimeText}}</view>
						</view>
						<view class="desc">
							<image :src="imageUrl+'/train/addr_icon.png'" mode="widthFix" class="desc-icon"></image>
							<view class="desc-text"><text class="label">地址：</text>{{item.transaddress}}</view>
						</view>
					</view>
				</view>
			</block>
			<view v-else class="empty">暂无数据</view>
		</view>
	</view>
</template>

<script>
	import {getTrainingList} from '@/api/train.js';
	export default {
		data() {
			return {
				list: [],
				imageUrl:'',
				page:1,
				limit:10,
				total:0,
				keyword:'',
				isMore:true
			}
		},
		methods:{
			getList(){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getTrainingList({page:this.page,limit:this.limit}).then((res)=>{
					uni.hideLoading()
					console.log(res)
						this.list=res.modelList;
						const total=res.count
						this.total=total;
						this.isMore=total>this.page*this.limit;
					
				}).catch((res)=>{
					uni.hideLoading()
					this.showToast('加载失败，请重试')
				})
			},
			inputChange(e){
				const value=e.detail.value;
				if(this.keyword!=value){
					this.keyword=value;
					this.resetPage()
				}
			},
			resetPage(){
				this.total=0;
				this.page=1;
				this.getList()
			},
			navigate(url){
				uni.navigateTo({url})
			}
		},
		onLoad() {
			this.imageUrl=this.globalConfig.imageUrl;
			this.getList();
		},
		onReachBottom(){
			if(this.isMore){
				this.page++;
				this.getList();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.search-block {
			padding: 20rpx 30rpx;
			position: relative;

			.search {
				height: 80rpx;
				width: 100%;
				background: #F6F6F6;
				padding: 0 20rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 40rpx;
			}

			.iconfont.icon-sousuo {
				position: absolute;
				transform: translate(0, -50%);
				top: 50%;
				right: 60rpx;
				font-size: 38rpx;
				font-weight: bold;
				color: #999;
			}
		}
		.list-block{
			.item-block {
				width: 100%;
				height: 320rpx;
				background-color: #fff;
				box-shadow: 0px 0px 4px #ccc;
				border-radius: 10rpx;
				margin: 30rpx auto 10rpx auto;
				padding: 25rpx;
			
				.top-title {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #f6f6f6;
					padding-bottom: 25rpx;
			
					.apply-title {
						font-weight: bold;
					}
			
					.btn {
						width: 160rpx;
						height: 55rpx;
						line-height: 55rpx;
						border-radius: 50rpx;
						text-align: center;
						color: #fff;
						background-color: #ff7626;
						font-size: 28rpx;
					}
				}
			
				.desc-block {
					display: flex;
					flex-direction: column;
			
					.desc {
						display: flex;
						align-items: center;
						margin: 20rpx 0 0rpx 0;
			
						.desc-icon {
							width: 30rpx;
							margin-right: 12rpx;
						}
			
						.desc-text {
							font-size: 30rpx;
			
							.label {
								color: #999;
							}
						}
					}
				}
			}
		}
	}
</style>
